BabylonJS GUI (Graphical User Interface) লাইব্রেরি, যা BabylonJS.GUI নামে পরিচিত, একটি শক্তিশালী এবং অত্যন্ত কার্যকরী টুল, যা 3D পরিবেশে ইউজার ইন্টারফেস (UI) উপাদান তৈরি করতে সহায়তা করে। এটি ব্যবহৃত হয় বিভিন্ন ধরনের ইন্টারঅ্যাকটিভ 3D অ্যাপ্লিকেশন এবং গেমগুলিতে, যেখানে ব্যবহারকারীর জন্য বাটন, স্লাইডার, ইনপুট ফিল্ড, টেক্সট এবং অন্যান্য UI উপাদান প্রয়োজন হয়। এই লাইব্রেরিটি সম্পূর্ণরূপে BabylonJS-এ বিল্ট-ইন এবং খুব সহজেই 3D দৃশ্যে UI উপাদানগুলো ইন্টিগ্রেট করতে সহায়তা করে।
BabylonJS GUI লাইব্রেরির বৈশিষ্ট্য
BabylonJS GUI লাইব্রেরি ব্যবহার করার মাধ্যমে আপনি খুব সহজেই 3D দৃশ্যের মধ্যে বিভিন্ন ধরনের UI উপাদান তৈরি করতে পারেন। এর কিছু প্রধান বৈশিষ্ট্য হল:
১. ইন্টারঅ্যাকটিভ উপাদান:
BabylonJS GUI লাইব্রেরি আপনাকে বাটন, টেক্সট, স্লাইডার, প্রগ্রেস বার, চেকবক্স ইত্যাদি তৈরির সুবিধা দেয়। এই উপাদানগুলো 3D দৃশ্যে ইন্টারঅ্যাকটিভ হিসেবে কাজ করে।
২. পজিশনিং ও স্কেলিং:
GUI উপাদানগুলোর অবস্থান, আকার এবং স্কেল খুব সহজেই নিয়ন্ত্রণ করা যায়। এর ফলে আপনি UI উপাদানগুলোকে দৃশ্যে সঠিকভাবে প্লেস করতে পারবেন।
৩. স্টাইলিং:
BabylonJS GUI লাইব্রেরি ব্যবহার করে আপনি UI উপাদানগুলোর স্টাইলিং করতে পারেন। এর মাধ্যমে ফন্ট, রং, ব্যাকগ্রাউন্ড ইত্যাদি কাস্টমাইজ করা যায়।
৪. 3D ও 2D UI উপাদান:
এটি 3D এবং 2D UI উপাদানকে সমর্থন করে। 3D UI উপাদানগুলি সোজাসুজি 3D দৃশ্যে সন্নিবেশিত হতে পারে, যেখানে 2D UI উপাদানগুলি 2D প্যানেলে প্রদর্শিত হয়।
৫. ইভেন্ট হ্যান্ডলিং:
BabylonJS GUI লাইব্রেরি UI উপাদানগুলোর জন্য ইভেন্ট হ্যান্ডলিং এর সুবিধা দেয়। যেমন, একটি বাটনে ক্লিক করলে আপনি কিছু নির্দিষ্ট কাজ করতে পারেন (যেমন, 3D দৃশ্যে কিছু পরিবর্তন বা মেনু প্রদর্শন ইত্যাদি)।
BabylonJS GUI লাইব্রেরি ব্যবহার শুরু করা
BabylonJS GUI লাইব্রেরি ব্যবহারের জন্য প্রথমে আপনাকে babylon.js লাইব্রেরির পাশাপাশি babylon.gui.js স্ক্রিপ্ট ফাইলটি অন্তর্ভুক্ত করতে হবে। এর মাধ্যমে আপনি 3D দৃশ্যে UI উপাদান যুক্ত করতে পারবেন।
১. HTML ফাইল তৈরি ও লাইব্রেরি লোড
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BabylonJS GUI Example</title>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/gui/babylon.gui.min.js"></script>
</head>
<body>
<canvas id="renderCanvas" style="width: 100%; height: 100%"></canvas>
<script>
// BabylonJS ইঞ্জিন এবং দৃশ্য তৈরি করা
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene(engine);
// ক্যামেরা এবং লাইট তৈরি
var camera = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
var light = new BABYLON.HemisphericLight("light1", BABYLON.Vector3.Up(), scene);
// BabylonJS GUI সিস্টেম তৈরি করা
var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI", true, scene);
// একটি বাটন তৈরি করা
var button = BABYLON.GUI.Button.CreateSimpleButton("button1", "Click Me");
button.width = "150px";
button.height = "40px";
button.color = "white";
button.background = "green";
button.onPointerUpObservable.add(function() {
alert("Button Clicked!");
});
advancedTexture.addControl(button);
// দৃশ্য রেন্ডার করা
engine.runRenderLoop(function () {
scene.render();
});
// উইন্ডোর সাইজ পরিবর্তন হলে রিসাইজ করা
window.addEventListener("resize", function () {
engine.resize();
});
</script>
</body>
</html>
কোড ব্যাখ্যা:
- লাইব্রেরি লোড: প্রথমে আমরা
babylon.jsএবংbabylon.gui.jsলাইব্রেরি লোড করেছি। GUI লাইব্রেরি UI উপাদান তৈরির জন্য ব্যবহৃত হয়। - AdvancedDynamicTexture: এটি একটি প্যানেল তৈরি করে যা GUI উপাদানগুলি ধারণ করবে। এখানে আমরা
CreateFullscreenUIপদ্ধতি ব্যবহার করে পুরো স্ক্রীনে UI উপাদান বসিয়েছি। - Button: একটি সাধারণ বাটন তৈরি করা হয়েছে, যা ক্লিক করলে একটি alert দেখাবে।
- Event Handling:
onPointerUpObservable.addএর মাধ্যমে বাটন ক্লিক করার পর একটি কাজ (এক্ষেত্রে alert) সম্পন্ন হচ্ছে।
BabylonJS GUI উপাদানগুলোর অন্যান্য ধরনের
১. TextBlock
TextBlock হল একটি টেক্সট প্রদর্শনকারী উপাদান, যা ব্যবহারকারীদের নির্দেশনা বা তথ্য প্রদর্শন করার জন্য ব্যবহার করা হয়।
var textBlock = new BABYLON.GUI.TextBlock();
textBlock.text = "Welcome to BabylonJS!";
textBlock.color = "white";
textBlock.fontSize = 24;
advancedTexture.addControl(textBlock);
২. Slider
Slider একটি স্কেলযোগ্য উপাদান যা ব্যবহারকারীদের একটি মান নির্বাচন করতে দেয়।
var slider = new BABYLON.GUI.Slider();
slider.minimum = 0;
slider.maximum = 100;
slider.value = 50;
slider.width = "200px";
slider.height = "20px";
slider.color = "green";
advancedTexture.addControl(slider);
৩. Image
Image উপাদান ব্যবহার করে 3D দৃশ্যে একটি ছবি বা ব্যাকগ্রাউন্ড ইমেজ যোগ করা যায়।
var image = new BABYLON.GUI.Image("image1", "path_to_image.jpg");
image.width = "100px";
image.height = "100px";
advancedTexture.addControl(image);
৪. Checkbox
Checkbox উপাদান ব্যবহারকারীদের একটি অপশন নির্বাচিত করার সুযোগ দেয়।
var checkbox = new BABYLON.GUI.Checkbox();
checkbox.isChecked = true;
checkbox.width = "20px";
checkbox.height = "20px";
advancedTexture.addControl(checkbox);
সারাংশ
BabylonJS GUI লাইব্রেরি 3D দৃশ্যে ইউজার ইন্টারফেস তৈরি করার একটি শক্তিশালী টুল। এর মাধ্যমে আপনি বাটন, টেক্সট, স্লাইডার, চেকবক্স, এবং অন্যান্য UI উপাদান খুব সহজেই তৈরি ও কাস্টমাইজ করতে পারেন। BabylonJS GUI লাইব্রেরি ব্যবহারের মাধ্যমে আপনি আপনার 3D প্রজেক্টকে আরও ইন্টারঅ্যাকটিভ ও ব্যবহারকারী-বান্ধব করতে পারবেন।
Read more
